<template>
	<view :class="data.toReturn==true ? 'HeadBarTrue' : 'HeadBarFalse'" :style="headBarStyle">
		<view class="Return" :style="data.toReturn==true ? 'display:flex' : 'display:none'"><image :src="data.imageUrl" @click="ReturnUrl()"></image></view>
		<view class="title" :style="{color:data.data.textColor}"><text :style="{fontSize:data.data.fontSize}">{{data.data.title}}</text></view>
		<view class="Return" :style="data.toReturn==true ? 'display:flex' : 'display:none'"></view>
		
		<view class="customContent">
			<slot name="customHead"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"HeadBar",
		props:{
			HeadBarData:{//内容配置
				type:Object,
				default(){
				  return {
					  height:0
				  }
				}
			},
			isFixedHead:{//是否固定在顶部
				type:Boolean,
				default:true
			},
			customCallBackHead:{//自定义回调事件
				type:Boolean,
				default:false
			},
		},
		data() {
			return {
				data:this.HeadBarData,
				statusBarHeight:""
			};
		},
		watch:{
			HeadBarData(newVal){
				this.data=newVal;
			}
		},
		computed:{
			headBarStyle(){
				let str = `top:0px;height:calc(45px + ${this.statusBarHeight}px + ${this.data.height}rpx);`
				if(this.data.backgroundImage !=''){
					str+=`backgroundImage:${this.data.backgroundImage};`
				}else{
					str+=`background:${this.data.BackColor};`
				}
				if(this.isFixedHead){
					str+=`position:fixed`
				}else{
					str+=`position:relative`
				}
				return str
			}
		},
		methods:{
			ReturnUrl(){
				if(this.customCallBackHead){
					this.$emit("LeftHeadClick")
				}else{
					uni.navigateBack({
					});
				}
			}
		},
		created(){
			const info = uni.getSystemInfoSync()
			this.statusBarHeight = info.statusBarHeight
		}
	}
</script>

<style scoped>
	.HeadBarFalse{
		align-items: flex-end;
		z-index: 1000;
		position: fixed;
		left: 0;
		right: 0;
		display: flex;
		padding-left: 15rpx;
		padding-right: 15rpx;
		height: 90rpx;
	}
	.HeadBarTrue{
		align-items: flex-end;
		z-index: 1000;
		display: flex;
		padding-left: 15rpx;
		padding-right: 15rpx;
		height: 90rpx;
		position: fixed;
		        left: 0;
		        right: 0;
	}
	.Return{
		margin-bottom: 25rpx;
		display: flex;
		width: 10%;
	}
	.Return image{
		height: 40rpx;
		width: 40rpx;
	}
	.title{
		margin-bottom: 25rpx;
		font-weight: 400;
		flex: 1;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: center;
	}
	.customContent{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
</style>